<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-form :inline="true" :model="formSearchData" size="small">
                <el-form-item label="">
                    <el-input v-model="formSearchData.keyword" placeholder="名称/ID"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-select v-model="formSearchData.status" placeholder="类型">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>

                <el-form-item class="float-right">
                    <el-button type="primary" size="mini" @click="openDialog({},'edit')">添加角色</el-button>
                </el-form-item>
            </el-form>


        </div>

        <el-table
            :data="dataEntities"
            style="width: 100%">
            <el-table-column
                type="index"
                width="40">
            </el-table-column>
            <el-table-column
                prop="id"
                width="140"
                label="ID标识"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                width="160"
                label="名称"
            >
            </el-table-column>

            <el-table-column
                label="权限"
                width="560px">
                <template slot-scope="scope">
                    <div class="border-bottom py-2" v-for="(accesses,i) in (scope.row.accesses_grouped || [])">
                        <template v-for="(access,i) in (accesses || [])">
                            <span class="font-weight-bold" v-if="0==i">{{access.entity_name || ''}}({{access.entity_id || ''}}) : </span>
                            <el-tag size="mini">
                                {{access.action_name || ''}}
                                <template v-if="'limit' == (access.type || '')">
                                    : {{access.val || ''}}
                                </template>
                            </el-tag>
                        </template>
                    </div>

                </template>
            </el-table-column>

            <el-table-column
                prop="status_name"
                label="状态"
                width="80px"
            >
            </el-table-column>
            <el-table-column
                label="时间">
                <template slot-scope="scope">
                    <div><b>C:</b> {{scope.row.created_at||''}}</div>
                    <div><b>U:</b> {{scope.row.updated_at||''}}</div>
                </template>
            </el-table-column>


            <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                    <el-button  type="text" size="mini"
                               @click="openDialog(scope.row,'edit')">查看/编辑
                    </el-button>
                    <el-button
                               type="text" size="mini" @click="openDialog(scope.row,'accesses')">分配权限
                    </el-button>
                    <el-button v-if="!(scope.row.required || false)" type="text"
                               size="mini" class="text-black-50" @click="deleteItem(scope.row)">删除
                    </el-button>
                </template>

            </el-table-column>

        </el-table>

        <div class="d-flex justify-content-end">
            <div class="pager" v-html="dataPager">

            </div>
        </div>

        <el-dialog
            v-if="roleDialogVisible.edit"
            width=""
            title="角色详情"
            :visible.sync="roleDialogVisible.edit"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="windowReload"
            append-to-body>
            <form-access-control-role-entity

                :data-entity="currentEditingRoleEntity"
                :status-options="statusOptions"
            >

            </form-access-control-role-entity>
        </el-dialog>

        <el-dialog
            v-if="roleDialogVisible.accesses"
            width=""
            title="角色权限"
            :visible.sync="roleDialogVisible.accesses"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="windowReload"
            append-to-body>
            <form-access-control-role-accesses

                :data-entity="currentEditingRoleEntity"
            >

            </form-access-control-role-accesses>
        </el-dialog>

    </el-card>
</template>

<script>


    export default {
        components: {},
        props: {
            dataEntities: {
                type: Array,
                default: []
            },
            dataSearch: {
                type: Object,
                default: {}
            },
            dataPager: {
                type: String,
                default: ''
            },
            statusOptions: {
                type: Array,
                default: []
            },


        },
        data() {
            return {
                formLabelWidth: window.formLabelWidth,
                formData: {},
                formErrors: {},
                formSearchData: {},
                roleDialogVisible: {
                    edit: false,
                    accesses: false,
                },
                currentEditingRoleEntity: {},
            }
        },
        created() {
            this.formSearchData = this.dataSearch;
            //console.log(this);
        },
        mounted() {
            let _this = this;

        },
        methods: {
            windowReload: function () {
                window.location.reload();
            },
            deleteItem: function (item) {
                let _this = this;
                let delete_api = LeRoute.get('api.l-e-s.access-control.role.delete')
                let entity_id = LeUtils.valueGet(item, 'id', '')

                if (!delete_api || !entity_id) {
                    _this.$message.error('数据有误')
                }

                this.$confirm('请确认要删除权限组？', '警告！', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$confirm('请再次确认要删除权限组？', '再次警告！', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //console.log(item)
                        LeRoute.request(delete_api, {id: entity_id}).then(function (res_data) {
                            _this.$message.success('删除成功')
                            window.location.reload();
                        }).catch(function (error) {
                            _this.$message.error('删除失败')
                        })
                    })
                })
            },

            search: function () {
                this.formSearchData.pager_page = ''
                window.location.href = LeUtils.buildUrl(window.location.href, this.formSearchData);
            },


            openDialog: function (entity, name) {
                let _this = this;
                name = name || 'edit'
                this.roleDialogVisible[name] = false;
                this.currentEditingRoleEntity = entity;
                this.$nextTick(() => {
                    this.roleDialogVisible[name] = true;
                })
            }
        }
    }
</script>
